<template>
    <view class="p-left30 p-right30">
        <view class="inner bor_radius_18">
            <image :src="imgUrl + 'brgn_bg1.png'" mode="widthFix"></image>
            <view class="main">
                <!-- 我的砍价 -->
                <view class="myCut m-bot30 bor_radius_18">
                    <view :style="{backgroundImage:'url(' + imgUrl + 'brgn_tit1.png' + ')'}"
                        class="tit size32 color_FF3 bold t-letter4 auto p-top8 text-center">我的砍价</view>
                    <swiper class="swiper m-bot20" :current="current" @change="changeSwiper">
                        <swiper-item v-for="item in 3" :key="item" @click="toUrl('/activityPage/bargain/bargainDetail')">
                            <view class="p-left20 p-right20 d-flex p-re">
                                <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="img"></image>
                                <view class="flex-1 m-left20 d-flex f-column j-sb">
                                    <view class="name size28 bold300 ellipsis">商品名称商品名称商品名称商品名称</view>
                                    <view>
                                        <view class="d-flex j-sb m-bot10">
                                            <view class="h7 color_66">已砍<text class="h7 color_FF3 bold">243元</text></view>
                                            <view class="h7 color_66">仅差<text class="h7 color_FF3 bold">24.63元</text></view>
                                        </view>
                                        <u-line-progress :percentage="50" inactiveColor="#FDAFB5" height="7" :showText="false" class="bg-linear"></u-line-progress>
                                    </view>
                                    <!-- 倒计时 -->
                                    <u-count-down :time="30 * 60 * 60 * 1000" @change="onChange">
                                        <view class="d-flex a-center">
                                            <view class="count">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                                            <text class="dot">:</text>
                                            <view class="count">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                                            <text class="dot">:</text>
                                            <view class="count">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                                            <text class="size22 color_66 m-left14">后结束</text>
                                        </view>
                                    </u-count-down>
                                    <view class="btn size26 white t-letter4 flexac">继续砍价</view>
                                </view>
                                <view class="label p-ab bg-linear size18 white">砍价中</view>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view class="dots flexac p-bot20">
                        <view class="dot" :class="{'active': item == current}" v-for="item in 3" :key="item"></view>
                    </view>
                </view>
                <!-- 一行一个 -->
                <view class="list_1" v-if="false">
                    <view class="item bgwhite m-bot30 padding20 d-flex p-re bor_radius_18" v-for="item in 4" :key="item">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="img"></image>
                        <view class="flex-1 m-left20 d-flex f-column j-sb">
                            <view>
                                <view class="join m-bot16 bg-linear h7 white">已有1500人参与</view>
                                <view class="size28 color_22 bold300 ellipsis">商品名称商品名称商品名称商品名称</view>
                            </view>
                            <view class="d-flex j-sb a-center">
                                <view>
                                    <text class="price size22">现价</text>
                                    <text class="price size28 bold m-left8 m-right16">￥99</text>
                                    <text class="full h6">￥360</text>
                                </view>
                                <view class="btn h6 white t-letter4 text-center">免费拿</view>
                            </view>
                        </view>
                        <view class="label p-ab bg-linear size18 white" style="top: 38rpx;">砍价中</view>
                    </view>
                </view>
                <!-- 一行两个 -->
                <view class="list_2 bgwhite bor_radius_18 d-flex j-sb f-wrap m-bot30" v-if="false">
                    <view class="item d-flex m-bot30" v-for="item in 6" :key="item">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="img m-right12"></image>
                        <view class="flex-1 d-flex f-column j-sb">
                            <view class="size26 color_22 bold300 ellipsis_2">商品名称商品名称商品名称</view>
                            <view class="btn bg-linear bor_radius_6 h7 white t-letter4 text-center">发起砍价</view>
                        </view>
                    </view>
                </view>
                <!-- 一行三个 -->
                <view class="list_3 bgwhite bor_radius_10 d-flex f-wrap m-bot30">
                    <view class="item bor_radius_10 d-flex f-column j-sb a-center m-bot20 m-right20" v-for="item in 5" :key="item">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" class="img"></image>
                        <view class="size26 color_22 bold">￥68.2</view>
                        <view class="size22 color_99">爆卖1088件</view>
                        <view class="btn bg-linear bor_radius_6 h7 white t-letter4 text-center">发起砍价</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		name:'bargain',
		props:['pageData'],
		data() {
			return {
				imgUrl: this.imgUrl + 'Uploads/diy/img/',
                current: 0,
                timeData: {}
			}
		},
		methods: {
			changeSwiper(e){
                this.current = e.detail.current
            },
            onChange(e){
                this.timeData = e
            }
		}
	}
</script>

<style lang="scss" scoped>
.inner {
    background: linear-gradient(180deg, #F41C26, #FFA35E);
    .main {
        padding: 0 20rpx 10rpx 20rpx;
    }
}
.myCut {
    background: linear-gradient(0deg, #FFE3CF, #FFFFFF);
    .tit {
        width: 328rpx;
        height: 70rpx;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .swiper {
        height: 220rpx;
        .img {
            width: 220rpx;
            height: 220rpx;
        }
        .name {
            color: #901414;
        }
        .count {
            width: 36rpx;
            line-height: 36rpx;
            background: #FFD0A0;
            color: #810000;
            font-weight: bold;
            text-align: center;
        }
        .dot {
            font-size: 28rpx;
            color: #810000;
            font-weight: bold;
            margin: 0 10rpx;
        }
        .btn {
            width: 372rpx;
            height: 52rpx;     
            background: linear-gradient(0deg, #FF3942, #FF5C63);     
            border: 2px solid #FFBC3A;       
            border-radius: 26rpx;
        }
    }
    .dots {
        .dot {
            width: 10rpx;
            height: 10rpx;
            background: #262626;  
            opacity: 0.3;
            border-radius: 50%;
            margin: 0 8rpx;
            &.active {
                width: 24rpx;
                height: 10rpx;
                background: #fff;
                opacity: 1;
                border-radius: 5rpx;
            }       
        }
    }
}
.list_1 {
    .item {
        .img {
            width: 160rpx;
            height: 160rpx;
        }
        .join {
            width: fit-content;
            line-height: 32rpx;
            padding: 0 16rpx;           
            border-radius: 2rpx;
        }
        .price {          
            color: #FF4931;
        }
        .full {
            color: #C0C0C0;
            text-decoration: line-through;
        }
        .btn {
            width: 140rpx;
            line-height: 50rpx;
            background: #FF3942;
            border-radius: 25rpx;
        }
    }
}
.list_2 {
    padding: 30rpx 30rpx 0 30rpx;
    .item {
        width: 280rpx;
        .img {
            width: 120rpx;
            height: 120rpx;
        }
        .btn {
            width: 120rpx;
            line-height: 40rpx;          
        }
    }
}
.list_3 {
    padding: 30rpx 0 10rpx 20rpx;
    .item {
        width: 190rpx;
        height: 292rpx;  
        border: 1px solid #FFBC3A;
        padding: 20rpx 0 16rpx 0;
        .img {
            width: 140rpx;
            height: 140rpx;
        }
        .btn {
            width: 110rpx;
            line-height: 36rpx;
        }
    }
}
.label {
    width: 66rpx;
    line-height: 32rpx; 
    opacity: 0.9;
    border-radius: 0px 16rpx 16rpx 0px;
    padding-left: 4rpx;
    left: 0;
    top: 20rpx;
}
.bg-linear {
    background: linear-gradient(-90deg, #F41C26, #FFA35E);
}
</style>